<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="新闻详情" />
      <view class="news-title">
        <!-- 温州站赛场：11岁赣州男生连续破100米200米记录 -->
        <text v-if="newsDetail.title">{{ newsDetail.title }}</text>
        <!-- <text v-if="newsDetail.content">：</text>
        <text v-if="newsDetail.content">{{ newsDetail.content }}</text> -->
      </view>
      <view class="news-time">
        {{ formatTime(newsDetail.createtime) }}
      </view>
      <!-- <image class="news-img" src="https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg" mode="aspectFill" />
      <image class="news-img"
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80"
        mode="aspectFill" /> -->
      <view class="news-content">
        <rich-text :nodes="newsDetail.content" />
      </view>
    </view>
    <!-- <movable-area class="movable-area">
      <movable-view class="fab-container" direction="all" :x="x" :y="y">
        <image :src="imgUrl + 'customerService2.png'" class="fab-icon" />
      </movable-view>
    </movable-area> -->
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { formatTime } from '@/utils/dateUtils.js'
  import { useRequest } from '@/api';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_NEWS_DETAIL_POST } = useRequest()
  const newsDetail = ref({
    title: '',
    createtime: '',
    content: ''
  })
  const x = ref(300);
  const y = ref(500);
  onMounted(() => {
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    x.value = windowWidth - 60; // 50px width + 10px margin
    y.value = windowHeight - 150; // Adjust based on bottom bar height and safe area
  });
  onShow(() => {
    const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面
    console.log('currentPage', currentPage);

    const options = currentPage.options; // 获取当前页面的参数
    const { id } = options;
    getNewsDetail(id);
  })
  const getNewsDetail = async (id) => {
    console.log('getNewsDetail', id);
    newsDetail.value = {
      title: '',
      createtime: '',
      content: ''
    };
    try {

      const res = await API_NEWS_DETAIL_POST({ id })
      console.log('getNewsDetail', res)

      if (res.code === 1) {
        newsDetail.value = res.data;
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }

  // const newsList = [
  //   { title: '温州站赛场：11岁赣州男生连续破100米200米记录', date: '2024.12.12', time: '09:00:00' },
  //   { title: '佛山5岁男孩连破400米记录', date: '2024.12.12', time: '09:00:00' },
  //   { title: '双胞胎体育生姐妹，包揽100米200米冠亚军', date: '2024.12.12', time: '09:00:00' },
  //   { title: '国家奥体杯“最受瞩目运动员”评选已开启', date: '2024.12.12', time: '09:00:00' },
  // ];

  // const contactService = () => {
  //   uni.showToast({
  //     title: '联系客服',
  //     icon: 'none'
  //   });
  // };

</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>